<template>
  <el-row :gutter="40" class="panel-group">
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
		  <div class="card-panel" @click="handleSetLineChartData(weibaoUrl)">
		    <div class="card-panel-icon-wrapper icon-message">
		      <!-- <svg-icon icon-class="message" class-name="card-panel-icon" /> -->
					<i class="el-icon-s-order" style="font-size: 50px;" />
		    </div>
		    <div class="card-panel-description" style="color: #36A3F7;">
		      <div class="card-panel-text">
		        待保养
		      </div>
		      <count-to :start-val="0" :end-val="weiBao" :duration="2000" class="card-panel-num" />
		    </div>
		  </div>
		</el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData(pingjiaUrl)">
        <div class="card-panel-icon-wrapper icon-people">
					<i class="el-icon-timer" style="font-size: 50px;"/>
					<!-- <i class="el-icon-s-claim" style="font-size: 50px;"/> -->
        </div>
        <div class="card-panel-description" style="color: #40C9C6;">
          <div class="card-panel-text">
            待评价
          </div>
          <count-to :start-val="0" :end-val="pingJia" :duration="1800" class="card-panel-num" />
        </div>
      </div>
    </el-col>
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
		  <div class="card-panel" @click="handleSetLineChartData(weixiuUrl)">
		    <div class="card-panel-icon-wrapper icon-money">
          <i class="el-icon-alarm-clock" style="font-size: 50px;"/>
					<!-- <i class="el-icon-s-release" style="font-size: 50px;"/> -->
		    </div>
		    <div class="card-panel-description" style="color: #f4516c;">
		      <div class="card-panel-text">
		        待维修
		      </div>
		      <count-to :start-val="0" :end-val="weiXiu" :duration="1600" class="card-panel-num" />
		    </div>
		  </div>
		</el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData(baoxiuUrl)">
        <div class="card-panel-icon-wrapper icon-money">
          <!-- <svg-icon icon-class="money" class-name="card-panel-icon" /> -->
					<i class="el-icon-s-check" style="font-size: 50px;"/>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            已报修
          </div>
          <count-to :start-val="0" :end-val="baoxiu" :duration="1400" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <!-- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            Shoppings
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col> -->
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
import { getLingdao,selectPandian,selectWeibaodaoqi,selectZichandaoqi } from '@/api/home'
import { selectWeixiu,idSearchShebei } from '@/api/caigou'
import checkPermission from '@/utils/permission'
import store from '@/store'
export default {
  components: {
    CountTo
  },
	data(){
		return{
      spNum: 0,
      weiBao: 0,  //待维保数量
      pingJia: 0,   //待评价数量
      weiXiu: 0,    //待维修数量
      baoxiu: 0,    //已报修
      weibaoUrl: '',   //维保url
      pingjiaUrl: '',  //评价url
      weixiuUrl: '',   //维修url
      baoxiuUrl: '',   //报修url
      searchData1: {},  //评价搜索
      searchData2: {},  //待维修搜索
      requestType: true   //是否是总监维修工之类请求
		}
	},
	mounted() {
    // this.getldsp()
    // this.getZichan()
    this.getRole()
    this.getPingjia()
    this.getWeixiu()
    this.getWeibao()
    this.getYibaoxiu()
	},
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
		// getldsp(){
		// 	getLingdao({}).then(res => {
		// 		console.log(res)
		// 		this.spNum = res.data.length
		// 	})
    // },
    getRole(){
      const roles = store.getters && store.getters.roles
      const list = ['dfZongjian','dfAdmin','dfEditor']
      const result = checkPermission(list)
      const isWeixiugong = roles.includes('dfEditor')
      const isChejian = roles.includes('dfChejian')
      const isZongjian = roles.includes('dfZongjian')
      if(isWeixiugong) {
        this.weibaoUrl = 'Weixiugongdaixunjian'
        this.pingjiaUrl = 'Weixiugongdaipingjia'
        this.weixiuUrl = 'Weixiugongdaiweixiu'
        this.baoxiuUrl = 'Weixiugongyibaoxiu'
      }else if(isChejian || isZongjian){
        this.weibaoUrl = 'Bumendengdaixunjian'
        this.pingjiaUrl = 'Daipingjia'
        this.weixiuUrl = 'Daiweixiu'
        this.baoxiuUrl = 'Yibaoxiu'
      }else{
        this.weibaoUrl = 'Waitjianxiu'
      }
      this.requestType = result
      console.log('result',result)
    },
    /**
     * 盘点管理
     */
    // getPandian(){
    //   selectPandian({}).then(res => {
    //     console.log('盘点',res)
    //     this.pandianNum = res.data.list.length
    //   })
    // },
    /**
     * 维保到期管理
     */
    // getWeibao(){
    //   selectWeibaodaoqi({}).then(res => {
    //     console.log('维保到期',res)
    //     this.weibaoNum = res.data.length
    //   })
    // },
    // 获取待评价
    getPingjia() {
      this.searchData1.servicePerson = this.$store.state.user.userInfo[0].username
      this.searchData1.departments = this.requestType ? null : this.$store.state.user.userInfo[0].departments
      this.searchData1.wxstatus = '已完成'
      selectWeixiu(this.searchData1).then(res => {
        console.log('评价',res);
        let temp = res.data.list
        let tableData = temp.filter(item => item.evaluateWeixiu == null || item.evaluateBaoxiu == null)
        this.pingJia = tableData.length
      })
    },
    //获取待维修
    getWeixiu() {
      this.searchData2.departments = this.requestType ? null : this.$store.state.user.userInfo[0].departments
      selectWeixiu(this.searchData2).then(res => {
        console.log('评价',res);
        this.tableData = res.data.list.map(item => item.wxstatus === '报修' || item.wxstatus === '维修中')
        this.weiXiu = tableData.length
      })
    },
    // 获取待维保
    getWeibao() {
      idSearchShebei({
        username: this.$store.state.user.userInfo[0].username
      }).then(res => {
        console.log('根据用户名搜索带检修得设备',res);
        const tableData = res.data
        this.weiBao = tableData.length
      })
    },
    // 获取已报修
    getYibaoxiu() {
      selectWeixiu({
        warrantyPerson: this.$store.state.user.userInfo[0].username
      }).then(res => {
        console.log(res);
        const tableData = res.data.list.filter(item => item.wxstatus === '报修')
        this.baoxiu = tableData.length
      })
    },
    /**
     * 资产超期管理
     */
    getZichan(){
      selectZichandaoqi({}).then(res => {
        console.log('资产超期',res)
        this.zichanNum = res.data.length
      })
    },
    
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  // margin-top: 18px;

  .card-panel-col {
    margin-bottom: 20px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    border-radius: 5px;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
